<template>
  <!-- 基本信息 -->
  <div class="bg-white my-[10px]">
    <BaseHead style="border-bottom: 0">基本信息</BaseHead>
    <BaseTable>
      <tr>
        <td class="td-name">单位名称</td>
        <td>{{ detailData.name }}</td>
        <td class="td-name">社会信用代码</td>
        <td>{{ detailData.code }}</td>
      </tr>
      <tr>
        <td class="td-name">注册资金</td>
        <td>{{ detailData.regFund }} 万元</td>
        <td class="td-name">单位性质</td>
        <td>
          <CommonLabel
            isFetch
            paramsName="甲方类别"
            valueKey="code"
            :value="detailData.buyerType"
          />
        </td>
      </tr>
      <tr>
        <td class="td-name">单位联系人</td>
        <td>{{ detailData.contacts }}</td>
        <td class="td-name">单位电话</td>
        <td>{{ detailData.telephone }}</td>
      </tr>
      <tr>
        <td class="td-name">证书有效状态</td>
        <td>
          <CommonLabel
            isFetch
            paramsName="证书有效状态"
            valueKey="code"
            :value="detailData.validType"
          />
        </td>
        <td class="td-name">证书有效日期</td>
        <td>{{ detailData.validDate }}</td>
      </tr>
      <tr>
        <td class="td-name">单位所在省份</td>
        <td>
          <CommonLabel
            :dataList="provinceList"
            labelKey="valueColumn"
            valueKey="codeColumn"
            :value="detailData.province"
          />
        </td>
        <td class="td-name">单位所属地市</td>
        <td>
          <CommonLabel
            :dataList="cityList.value"
            labelKey="label"
            valueKey="id"
            :value="detailData.city"
          />
        </td>
      </tr>
      <tr>
        <td class="td-name">单位地址</td>
        <td>{{ detailData.address }}</td>
        <td class="td-name">营业执照附件</td>
        <td>
          <template v-if="detailData.fileList">
            <p v-for="item in detailData.fileList" :key="item.id" class="my-[5px]">
              {{ item.name }}
              <el-link type="primary" @click="handleDownload(item.id, item.name)" class="ml-[5px]"
                >下载</el-link
              >
            </p>
          </template>
        </td>
      </tr>
      <tr>
        <td class="td-name">收款人</td>
        <td>{{ detailData.payee }}</td>
        <td class="td-name">开户银行</td>
        <td>{{ detailData.bankName }}</td>
      </tr>
      <tr>
        <td class="td-name">开户账号</td>
        <td>{{ detailData.bankAccount }}</td>
        <td class="td-name">国别</td>
        <td>{{ detailData.nationality }}</td>
      </tr>
      <tr>
        <td class="td-name">是否海外单位</td>
        <td colspan="3">{{ detailData.isOverseas }}</td>
      </tr>
      <tr>
        <td class="td-name">备注</td>
        <td colspan="3">{{ detailData.note }}</td>
      </tr>
    </BaseTable>
  </div>
</template>

<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
import BaseTable from "@/views/project/components/BaseTable.vue";
import CommonLabel from "@/views/project/components/CommonLabel.vue";
import { recordsDetail } from "@/api/project/yf/htgfdw";
import { handleDownload } from "@/utils/main";
import useCommonFetch from "@/hooks/useCommonFetch";
const props = defineProps({
  operateId: String,
});
const provinceList = useCommonFetch("甲方地区");
const cityList = ref([]);
const detailData = ref({});
//获取数据详情
const getDetail = async () => {
  try {
    const res = await recordsDetail(props.operateId);
    detailData.value = res.data;
    cityList.value = useCommonFetch("甲方所属地市", detailData.value.province);
  } catch (error) {
    console.log(error);
  }
};
onMounted(() => {
  getDetail();
});
</script>

<style scoped lang="scss"></style>
